import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Card, Row, Col, Descriptions, Button, Tabs, Spin, Statistic, Typography, Badge, Space, Alert } from 'antd';
import { RollbackOutlined, ReloadOutlined, SettingOutlined, BarChartOutlined, LineChartOutlined } from '@ant-design/icons';
// import { getDeviceDetail } from '../../services/api/device';
import './DeviceDetail.css';

const { Title } = Typography;
const { TabPane } = Tabs;

interface DeviceDetail {
  id: string;
  name: string;
  model: string;
  status: string;
  location: string;
  ipAddress: string;
  macAddress: string;
  lastActive: string;
  installDate: string;
  temperature: number;
  humidity: number;
  battery: number;
  maintenanceDate: string;
  manufacturer: string;
}

const mockDeviceData: DeviceDetail = {
  id: '1',
  name: '监控设备A',
  model: 'XMT-2000',
  status: '正常',
  location: '一号楼',
  ipAddress: '192.168.1.100',
  macAddress: 'AA:BB:CC:DD:EE:FF',
  lastActive: '2023-08-15 12:30:45',
  installDate: '2022-06-01',
  temperature: 36.5,
  humidity: 45,
  battery: 78,
  maintenanceDate: '2023-05-01',
  manufacturer: 'XMT Technology',
};

const DeviceDetail: React.FC = () => {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const [loading, setLoading] = useState<boolean>(true);
  const [device, setDevice] = useState<DeviceDetail | null>(null);
  const [activeTab, setActiveTab] = useState<string>('info');

  useEffect(() => {
    const fetchDeviceDetails = async () => {
      try {
        setLoading(true);
        // 实际项目中应该调用真实的API
        // const response = await getDeviceDetails(id);
        // setDevice(response.data);
        
        // 模拟API请求延迟
        setTimeout(() => {
          setDevice(mockDeviceData);
          setLoading(false);
        }, 1000);
      } catch (error) {
        console.error('获取设备详情失败', error);
        setLoading(false);
      }
    };

    if (id) {
      fetchDeviceDetails();
    }
  }, [id]);

  const goBack = () => {
    navigate(-1);
  };

  const refreshData = () => {
    if (id) {
      setLoading(true);
      // 实际项目中应该调用真实的API
      setTimeout(() => {
        setDevice(mockDeviceData);
        setLoading(false);
      }, 1000);
    }
  };

  const getStatusBadge = (status: string) => {
    switch (status) {
      case '正常':
        return <Badge status="success" text="正常运行" />;
      case '告警':
        return <Badge status="warning" text="告警状态" />;
      case '离线':
        return <Badge status="error" text="设备离线" />;
      default:
        return <Badge status="default" text={status} />;
    }
  };

  if (loading) {
    return (
      <div className="loading-container">
        <Spin size="large" tip="加载中..." />
      </div>
    );
  }

  if (!device) {
    return <Alert message="未找到设备信息" type="error" />;
  }

  return (
    <div className="device-detail-container">
      <div className="detail-header">
        <Space>
          <Button icon={<RollbackOutlined />} onClick={goBack}>返回</Button>
          <Button icon={<ReloadOutlined />} onClick={refreshData}>刷新</Button>
        </Space>
        <Title level={4}>{device.name} 详情</Title>
      </div>

      <Tabs activeKey={activeTab} onChange={setActiveTab} type="card">
        <TabPane tab={<span><SettingOutlined />基本信息</span>} key="info">
          <Card>
            <Descriptions title="设备基本信息" bordered column={{ xxl: 4, xl: 3, lg: 3, md: 2, sm: 1, xs: 1 }}>
              <Descriptions.Item label="设备ID">{device.id}</Descriptions.Item>
              <Descriptions.Item label="设备名称">{device.name}</Descriptions.Item>
              <Descriptions.Item label="型号">{device.model}</Descriptions.Item>
              <Descriptions.Item label="状态">{getStatusBadge(device.status)}</Descriptions.Item>
              <Descriptions.Item label="安装位置">{device.location}</Descriptions.Item>
              <Descriptions.Item label="IP地址">{device.ipAddress}</Descriptions.Item>
              <Descriptions.Item label="MAC地址">{device.macAddress}</Descriptions.Item>
              <Descriptions.Item label="最后活动时间">{device.lastActive}</Descriptions.Item>
              <Descriptions.Item label="安装日期">{device.installDate}</Descriptions.Item>
              <Descriptions.Item label="上次维护日期">{device.maintenanceDate}</Descriptions.Item>
              <Descriptions.Item label="制造商">{device.manufacturer}</Descriptions.Item>
            </Descriptions>
          </Card>
        </TabPane>
        
        <TabPane tab={<span><BarChartOutlined />实时监控</span>} key="monitor">
          <Row gutter={[16, 16]}>
            <Col span={8}>
              <Card>
                <Statistic
                  title="温度"
                  value={device.temperature}
                  precision={1}
                  suffix="°C"
                  valueStyle={{ color: device.temperature > 50 ? '#cf1322' : '#3f8600' }}
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card>
                <Statistic
                  title="湿度"
                  value={device.humidity}
                  precision={1}
                  suffix="%"
                  valueStyle={{ color: '#1890ff' }}
                />
              </Card>
            </Col>
            <Col span={8}>
              <Card>
                <Statistic
                  title="电池电量"
                  value={device.battery}
                  precision={0}
                  suffix="%"
                  valueStyle={{ color: device.battery < 20 ? '#cf1322' : '#3f8600' }}
                />
              </Card>
            </Col>
          </Row>
          
          <Card title="传感器数据历史" style={{ marginTop: '16px' }}>
            <div className="chart-placeholder">
              <LineChartOutlined style={{ fontSize: '48px', color: '#ccc' }} />
              <p>实际项目中这里应该显示历史数据图表</p>
            </div>
          </Card>
        </TabPane>
        
        <TabPane tab={<span><SettingOutlined />设备控制</span>} key="control">
          <Card title="设备控制面板">
            <div className="control-panel">
              <Button type="primary" style={{ margin: '8px' }}>重启设备</Button>
              <Button style={{ margin: '8px' }}>校准传感器</Button>
              <Button style={{ margin: '8px' }}>更新固件</Button>
              <Button danger style={{ margin: '8px' }}>紧急关闭</Button>
            </div>
          </Card>
        </TabPane>
      </Tabs>
    </div>
  );
};

export default DeviceDetail; 